<template>
	<view class="container">
		<!-- 任务2：搜索框 -->
		<!-- 1.3、使用组件 -->
		<search-bar />
		<!-- 任务3：轮播图 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
			<swiper-item class="rotation" v-for="(rotation, index) in rotationList">
				<image class="image" mode="scaleToFill" :src="rotation.advImg | imagePathCompletion"
					@click="goPress(rotation.targetId)" />
				<text class="title">{{ rotation.advTitle }}</text>
			</swiper-item>
		</swiper>
		<!-- 任务4：推荐应用 -->
		<view class="services">
			<view class="service" v-for="(service, index) in serviceList" :key="index"
				@click="goService(service.serviceName)">
				<image class="image" mode="aspectFill" :src="service.imgUrl | imagePathCompletion" />
				<text class="name">{{ service.serviceName }}</text>
			</view>
			<view class="service">
				<image class="image" mode="aspectFill" src="@/static/icon/more.jpg" @click="goServiceMore" />
				<text class="name">更多服务</text>
			</view>
		</view>
		<!-- 任务5：热门主题 -->
		<view class="hot">
			<view class="topic" v-for="(topic, index) in topicList" :key="index" @click="goTopic(topic.title)">
				<image class="image" mode="widthFix" :src="topic.image" />
				<text class="desc">{{ topic.desc }}</text>
			</view>
		</view>
		<!-- 任务6：新闻专栏 -->
		<view class="presses">
			<view class="header">时事新闻</view>
			<view class="list">
				<view class="press" v-for="(press, index) in pressList" :key="index" @click="goPress(press.id)">
					<view class="left">
						<image class="cover" mode="aspectFill" :src="press.cover | imagePathCompletion" />
					</view>
					<view class="right">
						<text class="title">{{ press.title }}</text>
						<text class="subtitle">{{ press.subTitle }}</text>
						<view class="notes">
							<text class="num">评论：{{ press.commentNum }}</text>
							<text class="date">发布：{{ press.publishDate }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 1.1、导入组件
	import SearchBar from '@/component/SearchBar.vue'
	import {
		getRotationList,
		getServiceList,
		getPressListByType
	} from '@/api/common.js'
	export default {
		components: {
			// 1.2、注册组件
			SearchBar
		},
		data() {
			return {
				rotationList: null,

				serviceList: null,

				topicList: [{
					title: '新冠疫情',
					image: '/static/hot/xgyq.jpg',
					desc: '不信谣，不传谣，不聚集，科学防控'
				}, {
					title: '电子社保卡',
					image: '/static/hot/dzsbk.jpg',
					desc: '实名领卡更安全，扫码结算更便捷'
				}, {
					title: '电子证件',
					image: '/static/hot/dzzz.jpg',
					desc: '身份证、驾驶证、户口簿、居住证'
				}, {
					title: '生活服务',
					image: '/static/hot/shfw.jpg',
					desc: '缴费全、出行快、电子化、全覆盖'
				}],

				pressList: null,
			}
		},
		onLoad() {
			this.getRotationList();
			this.getServiceList();
			this.getPressList();
		},
		methods: {
			// 获取广告轮播列表
			getRotationList() {
				const _that = this;
				getRotationList()
					.then((res) => {
						_that.rotationList = res.rows;
					})
					.catch(() => {
						uni.showToast({
							title: '加载异常'
						})
					})
			},
			// 获取服务列表
			getServiceList() {
				const _that = this;
				getServiceList()
					.then((res) => {
						_that.serviceList = res.rows;
					})
					.catch(() => {
						uni.showToast({
							title: '加载异常'
						})
					});
			},
			// 获取新闻资讯列表
			getPressList() {
				const _that = this;
				getPressListByType(1)
					.then((res) => {
						_that.pressList = res.rows;
					})
					.catch(() => {
						uni.showToast({
							title: '加载异常'
						})
					});
			},
			// 跳转到新闻资讯详情
			goPress(id) {
				uni.navigateTo({
					url: `/pages/press/detail?id=${id}`
				});
			},
			// 跳转到应用服务
			goService(name) {
				if (name == '城市地铁') {
					uni.navigateTo({
						url: '/pages/metro/index'
					});
				} else {
					uni.navigateTo({
						url: `/pages/service/detail?title=${encodeURIComponent(name)}`
					});
				}
			},
			goServiceMore() {
				uni.switchTab({
					url: `/pages/service/index`
				});
			},
			// 跳转到热门主题
			goTopic(name) {
				uni.navigateTo({
					url: `/pages/topic/index?title=${encodeURIComponent(name)}`
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		.swiper {
			width: 100vw;
			height: 50vw;

			.rotation {
				width: 100vw;
				height: 50vw;
				overflow: hidden;
				position: relative;

				.image {
					width: 100vw;
					height: 50vw;
				}

				.title {
					position: absolute;
					width: 96%;
					height: 2em;
					padding: 0 2% 18px;
					color: white;
					line-height: 2em;
					overflow: hidden;
					background-color: rgba(0, 0, 0, 0.4);
					left: 0;
					bottom: 0;
					z-index: 9999;
				}
			}
		}

		.services {
			width: 95vw;
			overflow: hidden;
			padding: 0.6em 2.5vw;
			background-color: white;
			border-bottom: #dddddd;
			display: grid;
			grid-template-columns: repeat(5, 20%);
			margin-bottom: 0.6rem;

			.service {
				width: 19vw;
				overflow: hidden;
				text-align: center;
				padding: 0.6em 0;

				.image {
					width: 12vw;
					height: 12vw;
				}

				.name {
					font-size: 0.8em;
					display: block;
				}
			}
		}

		.hot {
			width: 92vw;
			overflow: hidden;
			padding: 0.6em 4vw;
			display: flex;
			background-color: white;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-bottom: 0.6rem;

			.topic {
				width: 48%;
				padding: 0.4em 0;
				overflow: hidden;

				.image {
					width: 100%;
					border-radius: 20rpx;
				}

				.desc {
					width: 100%;
					font-size: 0.8em;
					display: block;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}

		.presses {
			width: 92vw;
			overflow: hidden;
			padding: 0 4vw;
			background-color: white;
			margin-bottom: 0.6rem;

			.header {
				width: 100%;
				height: 2.4rem;
				line-height: 2.4rem;
				border-bottom: 1px solid #dddddd;
			}

			.list {
				width: 100%;
				overflow: hidden;
				padding: 0.6rem 0;

				.press {
					width: 100%;
					overflow: hidden;
					display: flex;
					justify-content: space-around;
					padding: 0.2rem 0;

					.left {
						width: 28%;
						overflow: hidden;

						.cover {
							width: 100%;
							height: 4.2rem;
						}
					}

					.right {
						width: 68%;
						overflow: hidden;

						.title {
							width: 100%;
							display: block;
							line-height: 1.6rem;
						}

						.subtitle {
							width: 100%;
							font-size: 0.9rem;
							display: block;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.notes {
							width: 100%;
							font-size: 0.8rem;
							line-height: 1.6rem;
							color: $uni-text-color-grey;

							&>* {
								margin-right: 1.2rem;
							}
						}
					}
				}
			}
		}
	}

	@media screen and (min-width: 600px) {
		.container {
			.hot {
				.topic {
					width: 23%;
				}
			}
		}
	}
</style>
